<template>
    <div class="container">
        <div class="heade">
            <div class="header">
                <span class="text1">筛选查询</span>
                <span class="text2">本页金额合计：</span>
                <span class="text3">{{ total }}</span>
                <span class="text4" @click="isShowPull = !isShowPull">
                    <i class="el-icon-arrow-down" v-if="!isShowPull">展开筛选</i>
                    <i class="el-icon-arrow-up" v-if="isShowPull">收起筛选</i>
                </span>
                <button class="info reset" @click="resetForm()">重置</button>
                <button class="search info" @click="Search">查询结果</button>
                <button class="info SeniorCondition" @click="SeniorConditionDialogVisible = true">高级检索</button>
                <el-dialog title="高级检索" :visible.sync="SeniorConditionDialogVisible">
                    <el-form ref="form" :model="form" label-width="80px" class="heade-form">
                        <el-form-item label="创建日期">
                            <el-col :span="11">
                                <el-date-picker v-model="form.date" type="datetimerange" range-separator="至"
                                    start-placeholder="开始日期" end-placeholder="结束日期" style="width: 160px;">
                                </el-date-picker>
                                <!--<el-date-picker type="date" placeholder="选择日期" v-model="form.date" style="width: 200px;"></el-date-picker>-->
                            </el-col>
                        </el-form-item>
                        <el-form-item label="销售类型">
                            <el-select v-model="form.salesType" placeholder="请选择销售类型" style="width: 160px;">
                                <el-option label="车销" value="车销"></el-option>
                                <el-option label="访销" value="访销"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="订单类型">
                            <el-select v-model="form.orderType" placeholder="请选择订单类型" style="width: 160px;">
                                <el-option label="普通订单" value="普通订单"></el-option>
                                <el-option label="退货订单" value="退货订单"></el-option>
                                <el-option label="退款订单" value="退款订单"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="客户类型">
                            <el-input v-model="form.customerType" placeholder="请输入客户类型" style="width: 160px;"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="SeniorConditionDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="SeniorConditionDialogVisible = false">确 定</el-button>
                    </span>
                </el-dialog>
            </div>
            <div class="heade-text" v-show="isShowPull">
                <el-form ref="form" :model="form" label-width="80px" class="heade-form">
                    <el-form-item label="创建日期">
                        <el-col :span="11">
                            <el-date-picker v-model="form.date" type="datetimerange" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期">
                            </el-date-picker>
                            <!--<el-date-picker type="date" placeholder="选择日期" v-model="form.date" style="width: 200px;"></el-date-picker>-->
                        </el-col>
                    </el-form-item>
                    <el-form-item label="销售类型">
                        <el-select v-model="form.salesType" placeholder="请选择销售类型" style="width: 160px;">
                            <el-option label="车销" value="车销"></el-option>
                            <el-option label="访销" value="访销"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="订单类型">
                        <el-select v-model="form.orderType" placeholder="请选择订单类型" style="width: 160px;">
                            <el-option label="普通订单" value="普通订单"></el-option>
                            <el-option label="退货订单" value="退货订单"></el-option>
                            <el-option label="退款订单" value="退款订单"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="客户类型">
                        <el-input v-model="form.customerType" placeholder="请输入客户类型" style="width: 160px;"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="between">
            <div class="header">
                <div class="header-1">
                    <span class="text">数据列表</span>
                    <div class="caozuo">
                        <button type="success" class="add" @click="addOrder">添加</button>
                        <button type="success" class="pull">导出</button>
                        <!-- 批量删除 -->
                        <button type="success" class="delete" @click="deleteSelection">
                            {{ selectionID.length > 0 ? '删除已选择' : '删除' }}
                        </button>
                    </div>
                </div>
            </div>
            <div class="between-table">
                <el-table :header-cell-style="{ fontSize: '14px', textAlign: 'center' }" v-loading="loading"
                    :cell-style="{ fontSize: '12px', textAlign: 'center' }" ref="multipleTable" :data="tableData" border
                    tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" prop="id"></el-table-column>
                    <el-table-column label="编号">
                        <template slot-scope="scope">{{ scope.row.id + 1000000 }}</template>
                    </el-table-column>
                    <el-table-column prop="salesType" label="销售类型"></el-table-column>
                    <el-table-column prop="total" label="金额合计"></el-table-column>
                    <el-table-column prop="createTime" label="创建日期" width="150">
                        <template slot-scope="scope">
                            <span>
                                {{ dateFormat('YYYY-mm-dd HH:MM', scope.row.createTime) }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="orderType" label="订单类型"></el-table-column>
                    <el-table-column prop="customerType" label="客户类型"></el-table-column>
                    <el-table-column prop="customerName" label="客户名称"></el-table-column>
                    <el-table-column prop="employee" label="业务员"></el-table-column>
                    <el-table-column prop="warehouse" label="出库仓库"></el-table-column>
                    <el-table-column prop="vehicle" label="配送车辆">
                        <template slot-scope="scope">
                            {{ scope.row.vehicle === "" || scope.row.vehicle === null ? "未分配" : scope.row.vehicle }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="option" label="操作" width="120">
                        <template slot-scope="scope">
                            <router-link :to="{ path: '/PreviewOrder', query: { id: scope.row.id, isEdit: true } }">
                                <span class="column">编辑</span>
                            </router-link>
                            <router-link :to="{ path: '/PreviewOrder', query: { id: scope.row.id } }">
                                <span class="column">预览</span>
                            </router-link>
                            <span class="column" @click="deleteRow(scope.row.id)">删除</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="margin-top: 20px; display: flex; ">
                    <div class="block">
                        <el-pagination @current-change="handleCurrentChange" :page-size="PageSize"
                            layout="prev, pager, next, jumper" :total="SalesCount"
                            style="margin-left: 0px; margin-top: 20px; display: flex; justify-content: flex-end; width: 100%; margin-right: 20px;"
                            background>
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { findSalesOrders, deleteSalesOrders } from '@/api/sales_orders.js'
export default {
    data() {
        return {
            total: 0,
            isShowPull: false,
            loading: true,
            selectionID: [],
            SalesCount: 0,
            PageSize: 6,
            nowPage: 1,
            form: {
                date: '',
                beginDate: '',
                endDate: '',
                salesType: '',
                orderType: '',
                customerType: '',
            },
            tableData: [],
            multipleSelection: [],
            SeniorConditionDialogVisible: false,
        }
    },
    created() {
        this.findSalesOrders(this.nowPage, this.PageSize, this.form)
    },
    methods: {
        addOrder() {
            this.$router.push({
                path: '/order/AddOrder'
            })
        },
        dateFormat(fmt, date) {
            let ret = "";
            date = new Date(date);
            const opt = {
                'Y+': date.getFullYear().toString(), // 年
                'm+': (date.getMonth() + 1).toString(), // 月
                'd+': date.getDate().toString(), // 日
                'H+': date.getHours().toString(), // 时
                'M+': date.getMinutes().toString(), // 分
                'S+': date.getSeconds().toString() // 秒
                // 有其他格式化字符需求可以继续添加，必须转化成字符串
            }
            for (let k in opt) {
                ret = new RegExp('(' + k + ')').exec(fmt)
                if (ret) {
                    fmt = fmt.replace(
                        ret[1],
                        ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
                    )
                }
            }
            return fmt
        },
        handleCurrentChange(val) {
            // console.log(val)
            this.loading = true
            this.nowPage = val
            this.findSalesOrders(val, this.PageSize, this.form)
        },
        handleSelectionChange(val) {
            // console.log(val)
            this.selectionID = []
            val.forEach(item => {
                this.selectionID.push(item.id)
            })
            // console.log(this.selectionID)
        },
        deleteRow(id) {
            // console.log(id)
            this.$confirm('此操作将永久删除该订单, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.loading = true
                deleteSalesOrders(id).then(res => {
                    // console.log(res)
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    })
                    if (this.tableData.length == 1) {
                        this.nowPage = this.nowPage - 1
                    }
                    this.findSalesOrders(this.nowPage, this.PageSize, this.form)
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        deleteSelection() {
            // 确认删除
            if (this.selectionID.length == 0) {
                this.$message({
                    message: '请选择要删除的订单',
                    type: 'warning'
                });
                return;
            }
            // 再次确认
            this.$confirm('此操作将永久删除该订单, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 转换为数组
                // console.log(this.selectionID.join(','))
                this.loading = true
                deleteSalesOrders(this.selectionID.join(',')).then(res => {
                    console.log(res)
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    })
                    if (this.tableData.length == this.selectionID.length) {
                        this.nowPage = this.nowPage - 1
                    }
                    this.findSalesOrders(this.nowPage, this.PageSize, this.form)
                }).catch(error => {
                    console.log(error)
                    this.$message({
                        message: '删除失败',
                        type: 'error'
                    })
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        dateFormatByEl(date) {
            // date = 2023-7-8 00:00:00月和日小于10的时候，前面加0
            var date1 = date.split(' ')[0].split('-')
            var date2 = date.split(' ')[1]
            var month = date1[1] < 10 ? '0' + date1[1] : date1[1]
            var day = date1[2] < 10 ? '0' + date1[2] : date1[2]
            date = date1[0] + '-' + month + '-' + day + ' ' + date2
            return date
        },
        resetForm() {
            this.form = {
                date: '',
                beginDate: '',
                endDate: '',
                salesType: '',
                orderType: '',
                customerType: '',
            }
            this.loading = true
            this.findSalesOrders(this.nowPage, this.PageSize, this.form)
        },
        Search() {
            // console.log(this.form)
            // 获取时间
            if (this.form.date !== '') {
                var date = this.form.date.toLocaleString().split('/').join('-').split(',')
                // console.log(date)
                this.form.beginDate = this.dateFormatByEl(date[0])
                this.form.endDate = this.dateFormatByEl(date[1])
            }
            this.loading = true
            this.findSalesOrders(this.nowPage, this.PageSize, this.form)
        },
        findSalesOrders(page, size, form) {
            findSalesOrders(page, size, form,'').then(res => {
                console.log(res)
                this.SalesCount = res.data.data.count
                this.tableData = res.data.data.salesOrders
                // 获取金额
                this.total = 0
                this.tableData.forEach(item => {
                    // 字符串转数字
                    item.total = parseFloat(item.total)
                    this.total = this.total + item.total
                })
                this.loading = false
            }).catch(error => {
                console.log(error)
            })
        },
    }
}

</script>

<style scoped>
.heade-text {
    border: 1px solid rgba(228, 228, 228, 1);
    text-align: center;
}

.heade-form {
    display: flex;
    position: relative;
    top: 12px;
}

.text1 {
    font-size: 14px;
    position: absolute;
    left: 12px;
}

.text2 {
    font-size: 12px;
    position: absolute;
    left: 100px;
    color: red;
}

.text4 {
    font-size: 12px;
    margin: 0px 200px;
}

.reset {
    border: 1px solid rgba(228, 228, 228, 1) !important;
    background-color: rgb(255, 255, 255);
    width: 80px;
    height: 30px;
    margin: -4px 216px;
    cursor: pointer;
}

.reset:hover {
    background-color: rgb(228, 228, 228);
}

.search {
    border: 1px solid rgba(228, 228, 228, 1) !important;
    background-color: rgb(255, 255, 255);
    width: 80px;
    height: 30px;
    margin: -4px 108px;
    cursor: pointer;
}

.search:hover {
    background-color: rgb(228, 228, 228);
}

.SeniorCondition {
    border: 1px solid rgba(228, 228, 228, 1) !important;
    background-color: rgb(255, 255, 255);
    width: 80px;
    height: 30px;
    margin: -4px 0px;
    cursor: pointer;
}

.SeniorCondition:hover {
    background-color: rgb(228, 228, 228);
}

.text3 {
    font-size: 12px;
    position: absolute;
    left: 180px;
    color: red;
}

.header-1 {
    width: 100%;
}

.header-1 .add {
    position: absolute;
    right: 120px;
    top: 12px;
    border: 1px solid rgba(228, 228, 228, 1) !important;
    width: 80px;
    height: 30px;
    line-height: 26px;
    background-color: rgb(255, 255, 255);
    cursor: pointer;
    margin: -2px 0px;
}

.header-1 .pull {
    position: absolute;
    right: 12px;
    top: 12px;
    border: 1px solid rgba(228, 228, 228, 1) !important;
    width: 80px;
    height: 30px;
    line-height: 26px;
    background-color: rgb(255, 255, 255);
    cursor: pointer;
    margin: -2px 0px;
}

.delete {
    position: absolute;
    right: 228px;
    top: 12px;
    border: 1px solid rgba(228, 228, 228, 1) !important;
    width: 80px;
    height: 30px;
    line-height: 26px;
    background-color: rgb(255, 255, 255);
    cursor: pointer;
    margin: -2px 0px;
}

.header-1 .add:hover {
    background-color: rgb(220, 238, 255);
    color: rgb(24, 144, 255);
}

.header-1 .pull:hover {
    background-color: rgb(220, 238, 255);
    color: rgb(24, 144, 255);
}

.delete:hover {
    background-color: rgb(255, 220, 220);
    color: rgb(24, 144, 255);
}

.column {
    margin-right: 6px;
    cursor: pointer;
}

.column:hover {
    color: #409EFF;
    /* 下划线 */
    text-decoration: underline;
}
</style>